<!DOCTYPE html>
<html lang="zh-CN"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>机构管理</title>

<link type="text/css"
	th:href="@{/assets/plugins/jquery-ztree/3.5.24/css/bootstrap/metro.css}"
	rel="stylesheet" />
<link type="text/css"
	th:href="@{/assets/plugins/jquery-ztree/3.5.24/css/treeIcons.css}"
	rel="stylesheet" />
<script type="text/javascript"
	th:src="@{/assets/plugins/jquery-ztree/3.5.24/js/jquery.ztree.all.js}"></script>
<!--<link rel="stylesheet" type="text/css" th:href="@{/assets/plugins/fuelux/css/tree-metronic.css}"/>-->
<!--<script th:src="@{/assets/plugins/fuelux/js/tree.min.js}"></script>-->
 <script type="text/javascript">
        //        var treeUrl = "[[@{/sys/office/rootTreeData}]]";
        var treeUrl = "[[@{/sys/office/treeDataOffice}]]";
        var formUrl = "[[@{/sys/office/form}]]";
        var deleteUrl = "[[@{/sys/office/delete}]]";


        $(document).ready(function () {


            var treeSelectedNode = {};

            function doClick(event, treeId, treeNode) {

                if (treeNode.getParentNode() != null) {
                    App.blockUI(window, true);
                    treeSelectedNode = treeNode;
                    var $officeDetail = $("#officeDetail");
                    $officeDetail.load(formUrl, {id: treeNode.id}, function () {
                        App.unblockUI(window);
                    });
                }

            }

            $.ajaxSetup({cache: false});
            $.get(treeUrl, {_t: new Date().getTime()}, function (items) {


                function addHoverDom(treeId, treeNode) {

                    var spanObject = $("#" + treeNode.tId + "_span");
                    spanObject.data("hover-already", true);

                    var addBtnId = "addBtn_" + treeNode.tId;
                    var removeBtnId = "removeBtn_" + treeNode.tId;
                    var editBtnId = "editBtn_" + treeNode.tId;
                    if ($("#" + addBtnId).length > 0 || $("#" + editBtnId).length > 0) {

                        $("#" + addBtnId).data("id", treeNode.id);
                        $("#" + editBtnId).data("id", treeNode.id);
                        $("#" + removeBtnId).data("id", treeNode.id);
                        return;
                    }
					var stateAdd = [[${@permissionBean.hasPermission("sys:office:add")}]];
// 					var stateEdit = [[${@permissionBean.hasPermission("sys:office:edit")}]];
// 					var stateDelete = [[${@permissionBean.hasPermission("sys:office:delete")}]];
                    var addStr = "<span class='button add btn_tree_over' onfocus='this.blur();' id='" + addBtnId + "' data-id='" + treeNode.id + "' data-tid='" + treeNode.tId + "'></span>";
                    if (treeNode.type == 2 || !stateAdd) {
                        addStr = "";
                    }
//                     if (treeNode.getParentNode() != null) {
//                     	if(stateEdit){
//                         	addStr += "<span  class='button edit btn_tree_over' onfocus='this.blur();' id='" + editBtnId + "' data-id='" + treeNode.id + "' data-tid='" + treeNode.tId + "'></span>";
//                     	}
//                     	if(stateDelete){
//                         	addStr += "<span class='button remove btn_tree_over' onfocus='this.blur();' id='" + removeBtnId + "' title='add node' data-id='" + treeNode.id + "' data-tid='" + treeNode.tId + "'></span>";
//                     	}
//                 		addStr += "";
//                     }
                    spanObject.after(addStr);

					if(stateAdd){
	                    var $addBtnId = $("#" + addBtnId);
	                    if ($addBtnId) {
	                        $addBtnId.off("click").on("click", function (event) {
	                            event.stopPropagation();
	                            var nodeId = $(this).data("id");
	                            App.blockUI(window, true);
	                            var $officeDetail = $("#officeDetail");
	                            $officeDetail.load(formUrl, {"parent.id": nodeId, _t:new Date().getTime()}, function () {
	                                App.unblockUI(window);
	                            });
	                            return false;
	                        });
	                    }
					}
// 					if(stateEdit){
// 	                    var $editBtnId = $("#" + editBtnId);
// 	                    if ($editBtnId) {
// 	                        $editBtnId.off("click").on("click", function (event) {
// 	                            event.stopPropagation();
// 	                            var nodeId = $(this).data("id");
// 	                            App.blockUI(window, true);
// 	                            var $officeDetail = $("#officeDetail");
// 	                            $officeDetail.load(formUrl, {"id": nodeId, _t:new Date().getTime()}, function () {
// 	                                App.unblockUI(window);
// 	                            });
	
// 	                            return false;
// 	                        });
// 	                    }
// 					}
// 					if(stateDelete){
// 	                    var $removeBtnId = $("#" + removeBtnId);
// 	                    if ($removeBtnId) {
// 	                        $removeBtnId.off("click").on("click", function (event) {
// 	                            event.stopPropagation();
// 	                            var nodeId = $(this).data("id");
// 	                            App.confirm('要删除该机构及所有子机构项吗？', deleteUrl + "?id=" + nodeId);
	
// 	                            return false;
// 	                        });
// 	                    }
// 					}

					spanObject.data("hover-already", true);
                }

                function removeHoverDom(treeId, treeNode) {

                    $("#addBtn_" + treeNode.tId).off().remove();
                    $("#removeBtn_" + treeNode.tId).off().remove();
                    $("#editBtn_" + treeNode.tId).off().remove();
                }

                var setting = {
                    view: {
                        addHoverDom: addHoverDom,
                        removeHoverDom: removeHoverDom,
                        dblClickExpand: false,
                        showLine: true,
                        selectedMulti: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: doClick
                    }
                };

                $.fn.zTree.destroy("treeDemo");
                setTimeout(function(){
                    $(".btn_tree_over").off().remove();
                    var officeTree = $.fn.zTree.init($("#treeDemo"), setting, items);
                    officeTree.expandAll(true);
                }, 100);

            });
        });
    </script>
</head>

<body shiro:has-permission="sys:office:view">

	<div layout:fragment="content" th:remove="tag">

		<div
			th:replace="fragments/tool :: tipMessage (type='',content=${message})"
			th:remove="tag"></div>

		<!-- BEGIN PAGE HEADER-->
		<div class="row">
			<div class="col-md-12">
				<!-- BEGIN PAGE TITLE & BREADCRUMB-->
				<ul class="page-breadcrumb breadcrumb">
					<li class="btn-group"></li>
					<li><i class="fa fa-home"></i> <a th:href="@{/}">首页</a> <i
						class="fa fa-angle-right"></i></li>
					<li><a href="#">权限设置</a> <i class="fa fa-angle-right"></i></li>
					<li><a th:href="@{/sys/office}">机构管理</a></li>
				</ul>
				<!-- END PAGE TITLE & BREADCRUMB-->

			</div>
		</div>
		<!-- END PAGE HEADER-->

		<!-- BEGIN PAGE CONTENT-->
		<div class="row">
			<div class="col-md-12">
				<div class="portlet box" style="border: 1px solid #ccc;">
					<div class="portlet-body">
						<div class="row">
							<div class="col-xs-3 co3-sm-3 col-md-3 col-lg-3">
								<div id="treeDemo" class="ztree well"
									style="height: 694px; overflow-y: auto;"></div>
							</div>

    						<input type="hidden" th:value="${returnMessage}"/>
							<div class="col-xs-9 co3-sm-9 col-md-9 col-lg-9">
								<div id="officeDetail">
									<div style="margin-top: 5%; margin-left: 10%;">
										<h5>机构管理对企业机构及下属机构及部门的管理，包括：</h5>
										<p>1，添加机构或者部门</p>
										<p>2，可删除所创建的机构或者部门</p>
										<p>3，修改机构和部门</p>
										<p>4，查看机构和部门详情</p>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>
		<!-- END PAGE CONTENT-->
	</div>

</body>
</html>
